<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="study-card">
            <el-row class="study-list">
                <el-button v-for="(item, index) in studyList" :key="item"
                    :class="{ 'is-active': index === selectedIndex }" @click="selectButton(index)" type="info" plain>
                    {{ item }}
                </el-button>
            </el-row>
            <el-row class="study-list">
                <el-dropdown>
                    <el-button type="primary">
                        题单<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>字符串练习</el-dropdown-item>
                        <el-dropdown-item>数组练习</el-dropdown-item>
                        <el-dropdown-item>递归练习</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown>
                    <el-button type="primary">
                        难度<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item class="difficulty-easy">简单</el-dropdown-item>
                        <el-dropdown-item class="difficulty-medium">中等</el-dropdown-item>
                        <el-dropdown-item class="difficulty-hard">高级</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-dropdown>
                    <el-button type="primary">
                        标签<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>数组</el-dropdown-item>
                        <el-dropdown-item>字符串</el-dropdown-item>
                        <el-dropdown-item>排序</el-dropdown-item>
                        <el-dropdown-item>枚举</el-dropdown-item>
                        <el-dropdown-item>矩阵</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-row>
            <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                @row-click="studyDetail">
                <el-table-column prop="id" label="ID" sortable width="60"></el-table-column>
                <el-table-column prop="name" label="题目">
                </el-table-column>
                <el-table-column label="难度" sortable width="80">
                    <template slot-scope="scope">
                        <span :class="getDifficultyClass(scope.row.difficulty)">
                            {{ scope.row.difficulty }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="passingRate" label="通过率" sortable width="100">
                </el-table-column>
            </el-table>
            <div class="study-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage2" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="sizes, prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import NavigationBar from "@/components/NavigationBar.vue";

export default {
    components: {
        NavigationBar,
    },
    data() {
        return {
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            selectedIndex: 0,
            studyList: ["前端开发", "后端开发", "测试开发", "数据库开发"],
            tableData: [{
                id: 1,
                name: '两数之和',
                difficulty: '中等',
                passingRate: '20%'
            }, {
                id: 2,
                name: '两数之加',
                difficulty: '简单',
                passingRate: '60%'
            }, {
                id: 3,
                name: '最长回文字符串',
                difficulty: '困难',
                passingRate: '40%'
            }, {
                id: 4,
                name: '整数反转',
                difficulty: '困难',
                passingRate: '90%'
            }, {
                id: 5,
                name: '值传递和引用传递',
                difficulty: '简单',
                passingRate: '10%'
            }, {
                id: 6,
                name: '有效的括号',
                difficulty: '中等',
                passingRate: '40%'
            }, {
                id: 7,
                name: '最长有效括号',
                difficulty: '简单',
                passingRate: '90%'
            }, {
                id: 8,
                name: '删除有序数组中的重复项',
                difficulty: '简单',
                passingRate: '57%'
            }, {
                id: 9,
                name: '电话号码的字母组合',
                difficulty: '简单',
                passingRate: '78%'
            }, {
                id: 10,
                name: '在排序数组中查找元素的第一个和最后一个位置',
                difficulty: '中等',
                passingRate: '44%'
            }
            ]
        };
    },
    methods: {
        getDifficultyClass(difficulty) {
            const difficultyClasses = {
                '简单': 'difficulty-easy',
                '中等': 'difficulty-medium',
                '困难': 'difficulty-hard'
            };

            if (difficulty in difficultyClasses) {
                return difficultyClasses[difficulty];
            }
            console.error(`无效的难度类型: ${difficulty}`);
            return '';
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // methods here
        selectButton(index) {
            this.selectedIndex = index; // 更新选中的按钮索引
        },
        formatter(row, column) {
            return row.address;
        },
        studyDetail(row, column, cell, event) {
            this.$router.push({
                name: 'StudyDetail',
                params: { id: row.id }
            });
        }

    },
    mounted() {
        // 在组件挂载后聚焦第一个按钮
    },
};
</script>

<style scoped>
.study-card {
    margin-top: 20px;
    margin-left: 200px;
    margin-right: 200px;
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.study-list {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.is-active {
    background-color: #909399;
    /* 可根据需要修改颜色 */
    color: white;
    /* 选中时字体颜色 */
}

.study-pagination {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.difficulty-easy {
    color: green;
}

.difficulty-medium {
    color: #ffb850;
}

.difficulty-hard {
    color: red;
}
</style>
